{% extends 'base.html' %}
{% load site_tags %}

{% block title %}{{ course.title }} — Online LMS{% endblock %}

{% block content %}
<!-- Course Header -->
<section class="bg-dark text-white py-5">
    <div class="container py-2">
        <div class="row g-4 align-items-center">
            <div class="col-lg-7">
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-white-50">Home</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'courses:course_list' %}" class="text-white-50">Courses</a></li>
                        <li class="breadcrumb-item active text-white">{{ course.title|truncatechars:30 }}</li>
                    </ol>
                </nav>
                <h1 class="fw-bold mb-3">{{ course.title }}</h1>
                {% if course.category %}
                <span class="badge bg-light text-primary mb-3">{{ course.category.name }}</span>
                {% endif %}
                <p class="text-white-75 lead mb-4">{{ course.short_description }}</p>
                <div class="d-flex flex-wrap gap-3 text-white-50 small mb-4">
                    <span><i class="bi bi-clock me-1"></i>{{ course.duration }}</span>
                    <span><i class="bi bi-collection me-1"></i>{{ course.get_module_count }} Modules</span>
                    <span><i class="bi bi-journal-text me-1"></i>{{ course.get_lesson_count }} Lessons</span>
                    <span><i class="bi bi-cash-stack me-1"></i>
                        {% if course.price == 0 %}Free{% else %}{% format_price course.price %}{% endif %}
                    </span>
                    {% if course.start_date %}
                    <span><i class="bi bi-calendar-event me-1"></i>Starts: {{ course.start_date|date:"d M Y" }}</span>
                    {% endif %}
                    {% if course.end_date %}
                    <span><i class="bi bi-calendar-check me-1"></i>Ends: {{ course.end_date|date:"d M Y" }}</span>
                    {% endif %}
                </div>
                {% if course.teachers.all %}
                <div class="d-flex align-items-center gap-2 text-white-75 small">
                    <i class="bi bi-person-check-fill"></i>
                    <span>Taught by:
                        {% for teacher in course.teachers.all %}
                            <strong>{{ teacher.get_display_name }}</strong>{% if not forloop.last %}, {% endif %}
                        {% endfor %}
                    </span>
                </div>
                {% endif %}
            </div>
            <div class="col-lg-5">
                <div class="card border-0 shadow-lg rounded-4">
                    {% if course.thumbnail %}
                        <img src="{{ course.thumbnail.url }}" class="card-img-top rounded-top-4" alt="{{ course.title }}" style="height:200px;object-fit:cover;">
                    {% else %}
                        <div class="bg-primary bg-opacity-20 rounded-top-4 d-flex align-items-center justify-content-center" style="height:200px;">
                            <i class="bi bi-book-half text-primary" style="font-size:4rem;"></i>
                        </div>
                    {% endif %}
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <span class="fs-3 fw-bold text-primary">
                                {% if course.price == 0 %}
                                    <span class="badge bg-success fs-6">Free</span>
                                {% else %}
                                    {% format_price course.price %}
                                {% endif %}
                            </span>
                        </div>

                        {% if course.start_date or course.end_date %}
                        <div class="rounded-3 p-3 mb-3" style="background:#f8faff;border:1px solid #e0eaff;">
                            {% if course.start_date %}
                            <div class="d-flex align-items-center gap-2 small mb-1">
                                <i class="bi bi-calendar-event text-primary"></i>
                                <span class="text-muted">Start Date:</span>
                                <span class="fw-semibold">{{ course.start_date|date:"d M Y" }}</span>
                            </div>
                            {% endif %}
                            {% if course.end_date %}
                            <div class="d-flex align-items-center gap-2 small">
                                <i class="bi bi-calendar-check text-success"></i>
                                <span class="text-muted">End Date:</span>
                                <span class="fw-semibold">{{ course.end_date|date:"d M Y" }}</span>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}

                        {% if not course.is_enrollment_open %}
                        <div class="alert alert-secondary py-2 small mb-3 d-flex align-items-center gap-2">
                            <i class="bi bi-lock-fill"></i> Enrollment is closed — this course has already started.
                        </div>
                        {% endif %}

                        <div class="d-grid gap-2 mb-3">
                          {% if course.has_learning_content %}
                          <a href="{% url 'courses:learning_path' slug=course.slug %}" class="btn btn-primary fw-semibold">
                            <i class="bi bi-play-circle me-2"></i>Start Learning
                            {% if course.learning_price %} · {{ course.currency }} {{ course.learning_price }}{% endif %}
                          </a>
                          {% endif %}
                          <a href="{% url 'enrollments:enroll' slug=course.slug %}?path=direct" class="btn btn-outline-primary">
                            <i class="bi bi-award me-2"></i>Take Certification Exam Directly
                            · {{ course.currency }} {{ course.effective_direct_exam_price }}
                          </a>
                        </div>

                        <div class="rounded-3 border p-3 mb-3 small" style="background:#f8fafc;">
                          <div class="fw-semibold mb-2"><i class="bi bi-tag me-1"></i>Pricing options</div>
                          {% if course.has_learning_content and course.learning_price %}
                          <div class="mb-1">
                            <strong>Learning Path</strong> (self-paced):
                            {{ course.currency }} {{ course.learning_price }}
                            {% if course.duration_weeks %} · ~{{ course.duration_weeks }} weeks{% endif %}
                          </div>
                          {% if course.mentorship_available and course.mentorship_price %}
                          <div class="mb-1 text-muted">
                            + Mentorship add-on: {{ course.currency }} {{ course.mentorship_price }}
                          </div>
                          {% endif %}
                          <div class="mb-1">
                            <strong>Exam</strong>: {{ course.currency }} {{ course.exam_fee }}
                            · Reattempt {{ course.currency }} {{ course.reattempt_fee }}
                          </div>
                          {% if course.bundle_discount_percent %}
                          <div class="mb-1">
                            <strong>Bundle</strong> (Learning + Exam):
                            {{ course.currency }} {{ course.learning_exam_bundle_price }}
                            <span class="text-success">({{ course.bundle_discount_percent }}% off
                              vs {{ course.currency }} {{ course.learning_plus_exam_list_price }})</span>
                          </div>
                          {% endif %}
                          {% endif %}
                          <div class="mb-1">
                            <strong>Direct exam only</strong>:
                            {{ course.currency }} {{ course.effective_direct_exam_price }}
                          </div>
                          {% if course.subscription_enabled and course.subscription_price_monthly %}
                          <hr class="my-2">
                          <div>
                            One-time learning:
                            {% if course.learning_price %}{{ course.currency }} {{ course.learning_price }}{% else %}—{% endif %}
                            · Or <strong>{{ course.currency }} {{ course.subscription_price_monthly }}/month</strong>, cancel anytime —
                            average finish in {{ course.estimated_completion_months }} month{{ course.estimated_completion_months|pluralize }}
                            (≈{{ course.currency }} {{ course.estimated_subscription_total }}).
                          </div>
                          <div class="text-muted mt-1" style="font-size:.75rem;">
                            Subscription can cost more if you take longer — we show this so there are no surprises.
                            Renewals are currently manual (pay each month); auto-billing comes when the gateway supports it.
                          </div>
                          {% endif %}
                        </div>

                        <div class="small text-muted text-center mb-3">
                            Exam {{ course.question_count_per_attempt }} MCQs · Pass {{ course.pass_percentage }}% · {{ course.duration_minutes }} min
                            {% if course.has_sale_price %}
                            <br><span class="text-success">Sale exam price: {{ course.currency }} {{ course.display_exam_price }}
                              <span class="text-decoration-line-through text-muted">{{ course.currency }} {{ course.exam_fee }}</span></span>
                            {% endif %}
                            {% if course.bundle %}
                            <br>Part of bundle: <strong>{{ course.bundle.name }}</strong>
                              ({{ course.bundle.discount_percent }}% off package)
                            {% endif %}
                            {% if course.has_learning_content %}
                            <br>Learning mix: {{ theory_percent }}% theory · {{ practice_percent }}% practice
                            {% endif %}
                            {% if course.requires_practical %}<br><span class="text-warning">Includes practical submission (certificate after approval)</span>{% endif %}
                        </div>

                        {% if course.enable_free_diagnostic %}
                        <a href="{% url 'courses:diagnostic_intro' slug=course.slug %}" class="btn btn-outline-secondary w-100 mb-3">
                            <i class="bi bi-clipboard2-pulse me-2"></i>Free skill check (no login)
                        </a>
                        {% endif %}

                        {% if user.is_authenticated %}
                            {% if user.role == 'student' %}
                                {% if enrollment %}
                                    {% if enrollment.status == 'approved' %}
                                        <div class="alert alert-success py-2 small mb-3">
                                            <i class="bi bi-check-circle me-1"></i>You are enrolled in this course.
                                        </div>
                                        {% if course.has_learning_content %}
                                        <a href="{% url 'courses:learning_path' slug=course.slug %}" class="btn btn-success w-100 mb-2">
                                            <i class="bi bi-play-circle me-2"></i>Continue Learning Path
                                        </a>
                                        {% endif %}
                                        <a href="{% url 'courses:exam_start' slug=course.slug %}" class="btn btn-outline-primary w-100">
                                            <i class="bi bi-clipboard2-check me-2"></i>Start / resume exam
                                        </a>
                                        <p class="text-muted small text-center mt-2 mb-0">
                                            Requires a verified question bank (import in admin). Soft anti-cheat — flagged after 3 tab switches, not auto-failed.
                                        </p>
                                    {% elif enrollment.status == 'pending' %}
                                        <div class="alert alert-warning py-2 small mb-3">
                                            <i class="bi bi-hourglass me-1"></i>Enrollment pending approval.
                                        </div>
                                        {% if not enrollment.payment_proof %}
                                        <a href="{% url 'enrollments:upload_payment' pk=enrollment.pk %}" class="btn btn-warning w-100">
                                            <i class="bi bi-upload me-2"></i>Upload Payment Proof
                                        </a>
                                        {% else %}
                                        <button class="btn btn-outline-secondary w-100" disabled>
                                            <i class="bi bi-hourglass-split me-2"></i>Awaiting Admin Review
                                        </button>
                                        {% endif %}
                                    {% elif enrollment.status == 'rejected' %}
                                        <div class="alert alert-danger py-2 small mb-3">
                                            <i class="bi bi-x-circle me-1"></i>Enrollment was rejected.
                                            {% if enrollment.rejection_reason %}<br><small>Reason: {{ enrollment.rejection_reason }}</small>{% endif %}
                                        </div>
                                    {% endif %}
                                {% endif %}
                            {% elif user.role == 'teacher' or user.role == 'admin' %}
                                <a href="{% url 'courses:manage_course' pk=course.pk %}" class="btn btn-outline-primary w-100">
                                    <i class="bi bi-gear me-2"></i>Manage Course
                                </a>
                            {% endif %}
                        {% else %}
                            <p class="text-muted small text-center mt-2 mb-0">
                                <a href="{% url 'accounts:login' %}">Login</a> or
                                <a href="{% url 'accounts:student_signup' %}">create a free account</a> to continue.
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Course Content -->
<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-8">
                <!-- Description -->
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <h4 class="fw-bold mb-3">About This Course</h4>
                        <div class="text-muted mb-4">{{ course.full_description|linebreaks }}</div>
                        {% if course.start_date or course.end_date %}
                        <div class="rounded-3 p-3" style="background:#f8faff;border:1px solid #dbeafe;">
                            <div class="fw-semibold small mb-2 text-dark"><i class="bi bi-calendar3 me-2 text-primary"></i>Course Schedule</div>
                            <div class="row g-2">
                                {% if course.start_date %}
                                <div class="col-sm-6">
                                    <div class="d-flex align-items-center gap-2 small">
                                        <div class="rounded-2 d-flex align-items-center justify-content-center flex-shrink-0" style="width:32px;height:32px;background:#fff7ed;">
                                            <i class="bi bi-calendar-event" style="color:#c2410c;"></i>
                                        </div>
                                        <div>
                                            <div class="text-muted" style="font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;">Start Date</div>
                                            <div class="fw-semibold">{{ course.start_date|date:"d M Y" }}</div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                {% if course.end_date %}
                                <div class="col-sm-6">
                                    <div class="d-flex align-items-center gap-2 small">
                                        <div class="rounded-2 d-flex align-items-center justify-content-center flex-shrink-0" style="width:32px;height:32px;background:#f0fdf4;">
                                            <i class="bi bi-calendar-check" style="color:#15803d;"></i>
                                        </div>
                                        <div>
                                            <div class="text-muted" style="font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;">End Date</div>
                                            <div class="fw-semibold">{{ course.end_date|date:"d M Y" }}</div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Modules & Lessons -->
                <div class="card border-0 shadow-sm rounded-4" id="modules">
                    <div class="card-body p-4">
                        <h4 class="fw-bold mb-4">Course Content</h4>
                        <div class="accordion" id="courseAccordion">
                            {% for module in modules %}
                            <div class="accordion-item border mb-2 rounded-3 overflow-hidden">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {% if not forloop.first %}collapsed{% endif %} fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#module{{ module.pk }}">
                                        <i class="bi bi-folder2 me-2 text-primary"></i>
                                        {{ module.title }}
                                        <span class="badge bg-secondary ms-2 small">{{ module.lessons.count }} lessons</span>
                                    </button>
                                </h2>
                                <div id="module{{ module.pk }}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}">
                                    <div class="accordion-body p-0">
                                        <ul class="list-group list-group-flush">
                                            {% for lesson in module.lessons.all %}
                                            <li class="list-group-item d-flex align-items-center justify-content-between py-2 px-4">
                                                <div class="d-flex align-items-center gap-2">
                                                    {% if lesson.video_url or lesson.video_file %}
                                                        <i class="bi bi-play-circle text-primary"></i>
                                                    {% else %}
                                                        <i class="bi bi-file-text text-muted"></i>
                                                    {% endif %}
                                                    <span class="small">{{ lesson.title }}</span>
                                                    {% if lesson.is_preview %}
                                                        <span class="badge bg-success-subtle text-success small">Preview</span>
                                                    {% endif %}
                                                </div>
                                                {% if lesson.is_preview %}
                                                    <a href="{% url 'courses:lesson_detail' pk=lesson.pk %}" class="btn btn-outline-primary btn-sm">Preview</a>
                                                {% elif enrollment and enrollment.status == 'approved' %}
                                                    <a href="{% url 'courses:lesson_detail' pk=lesson.pk %}" class="btn btn-outline-secondary btn-sm">Watch</a>
                                                {% else %}
                                                    <i class="bi bi-lock text-muted"></i>
                                                {% endif %}
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            {% empty %}
                            <p class="text-muted">No modules available yet.</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Instructors -->
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3">Your Instructors</h5>
                        {% for teacher in course.teachers.all %}
                        <div class="d-flex align-items-center gap-3 {% if not forloop.last %}mb-3{% endif %}">
                            {% if teacher.profile_picture %}
                                <img src="{{ teacher.profile_picture.url }}" class="rounded-circle" width="48" height="48" style="object-fit:cover;" alt="">
                            {% else %}
                                <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width:48px;height:48px;">
                                    <i class="bi bi-person-fill text-success"></i>
                                </div>
                            {% endif %}
                            <div>
                                <div class="fw-semibold small">{{ teacher.get_display_name }}</div>
                                <div class="text-muted small">{{ teacher.bio|truncatechars:60 }}</div>
                            </div>
                        </div>
                        {% empty %}
                        <p class="text-muted small">No instructors listed.</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}